<template>
  <div class="follower-list-card bg-white/95 backdrop-blur-lg rounded-2xl shadow-lg overflow-hidden p-6 transition-all duration-300 ease-in-out">

    <div class="flex items-center justify-between mb-5">
      <h2 class="text-xl font-bold text-gray-800 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-pink-400" viewBox="0 0 20 20" fill="currentColor">
          <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
        </svg>
        <span>粉丝列表</span>
      </h2>

      <div class="flex items-center space-x-1" v-if="totalPages > 1">
        <button @click="previousPage" :disabled="currentPage === 1" class="pagination-btn">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
        </button>
        <span class="text-sm font-medium text-gray-600 w-8 text-center">{{ currentPage }}/{{ totalPages }}</span>
        <button @click="nextPage" :disabled="currentPage === totalPages" class="pagination-btn">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
        </button>
      </div>
    </div>

    <div v-if="followers.length === 0" class="text-center text-gray-500 py-16">
      <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <p class="mt-3 text-lg">还没有粉丝哦</p>
      <p class="mt-1 text-sm text-gray-500">快去发布有趣的内容吸引大家吧！</p>
    </div>

    <ul v-else class="space-y-4">
      <li 
        v-for="user in currentPageFollowers" 
        :key="user.id" 
        class="follower-item"
        @click="handleFollowerClick(user.id)"
      >
        <div class="relative">
          <img :src="user.avatar" alt="avatar" class="w-14 h-14 rounded-full object-cover border-3 border-white shadow-md transition-transform duration-300 group-hover:scale-110">
          <div v-if="user.gender"
               class="gender-badge absolute -bottom-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center text-white text-xs shadow-md border-2 border-white"
               :class="user.gender === 'male' ? 'bg-blue-500' : 'bg-pink-400'">
            {{ user.gender === 'male' ? '♂' : '♀' }}
          </div>
        </div>
        
        <div class="flex-1 min-w-0">
          <div class="flex items-center mb-1">
            <p class="text-lg font-bold text-gray-800 truncate mr-2" :title="user.nickname">{{ user.nickname }}</p>
            <p class="text-sm text-gray-500">{{ user.age }}岁</p>
          </div>
          <div class="text-sm text-gray-600 truncate mb-1" :title="`${user.schoolName} · ${user.major}`">
            <span class="font-semibold">{{ user.schoolName }}</span> · {{ user.major }} · {{ user.class }}
          </div>
          <div class="text-xs text-gray-500">
            IP属地: {{ user.ipCity }}
          </div>
        </div>

        <div class="flex flex-col items-end">
          <button @click.stop="toggleFollow(user)" class="follow-btn" :class="user.isFollowing ? 'following' : 'not-following'">
            <svg v-if="user.isFollowing" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span>{{ user.isFollowing ? '已关注' : '关注' }}</span>
          </button>
          <div class="text-xs text-gray-500 mt-1">
            <span>关注你的时间: {{ user.followTime }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { followersData } from '@/mock/user/followersData.js';

export default {
  name: 'FollowersList',
  props: {
    userId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      followers: [],
      currentPage: 1,
      itemsPerPage: 6,
    };
  },
  computed: {
    totalPages() {
      if (!this.followers || this.followers.length === 0) return 1;
      return Math.ceil(this.followers.length / this.itemsPerPage);
    },
    currentPageFollowers() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.followers.slice(start, end);
    }
  },
  created() {
    this.fetchFollowers();
  },
  methods: {
    fetchFollowers() {
      console.log(`获取用户 ${this.userId} 的粉丝列表`);
      this.followers = followersData.map(user => ({ ...user, isFollowing: Math.random() > 0.5 }));
    },
    previousPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    },
    handleFollowerClick(followerId) {
      this.$router.push({ path: '/user', query: { userId: followerId } });
    },
    toggleFollow(user) {
      user.isFollowing = !user.isFollowing;
      // 在实际应用中，这里应该调用API
      console.log(`用户 ${user.id} 的关注状态变为: ${user.isFollowing}`);
    }
  },
};
</script>

<style scoped>
.follower-list-card {
  font-family: 'Inter', sans-serif;
}

.follower-item {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 减少间距 */
  padding: 0.5rem 1rem; /* 减少内边距 */
  border-radius: 0.75rem; /* 12px */
  background-color: rgba(249, 250, 251, 0.7);
  border: 1px solid rgba(229, 231, 235, 0.8);
  transition: all 0.3s ease;
  cursor: pointer;
}

.follower-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  background-color: white;
  border-color: transparent;
}

.follow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
  min-width: 90px;
}

.follow-btn.not-following {
  background-color: #0ab446; /* red-500 */
  color: white;
}

.follow-btn.not-following:hover {
  background-color: #4fc812; /* red-600 */
  transform: scale(1.05);
}

.follow-btn.following {
  background-color: #e5e7eb; /* gray-200 */
  color: #4b5563; /* gray-600 */
}

.follow-btn.following:hover {
  background-color: #d1d5db; /* gray-300 */
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.05);
  color: #4b5563;
  transition: all 0.2s ease-in-out;
}

.pagination-btn:not(:disabled):hover {
  background-color: #10b981; /* emerald-500 */
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style> 